<template>
  {{ refData }}
  {{ reactiveData }}
  <button @click="change">change</button>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

// watch 第一个参数为对象或回调函数，均确保为响应式数据，第二个参数为回调函数，第三个参数为配置对象
// 第一个参数为对象时，为 Ref 对象时，默认会监听其浅层的变化，即 Ref.value 的变化
// 为 Reactive 对象时，默认监听整个深层次的变化
// 第一个参数为回调函数时，会监听回调函数的返回值的变化，一般常用于监听响应式原始值
// 第二个参数为回调函数，在第一个参数变化时，会触发回调函数，回调参数为 newVal 和 oldVal
// 第三个参数为配置对象，包含 deep immediate 配置属性，值均为布尔值
// deep 与深度监视 Ref 对象连用 immediate 会初始执行一次回调函数
// watch(
//   监视 Ref 时，默认浅层监视 Ref.value 监视 Proxy 时，强制执行 deep 深度监视
//   obj: Ref || Proxy, 第一个参数为对象
//   () => val 第一个参数为回调函数，监视其返回值
//   (newVal, oldVale) => {},
//   { deep: boolean, immediate : boolean }
// )

// 定义 ref 对象
const refData = ref({
  name: 'Mike',
  friend: {
    name: 'Tom',
  },
})
// 监听 refData 对象
watch(
  () => refData.value,
  (newVal, oldVal) => {
    console.log('new ' + newVal)
    console.log('odl ' + oldVal)
  },
  { deep: false }
)
// 定义 reactive 对象
const reactiveData = reactive({
  name: 'Mike',
  friend: {
    name: 'Jerry',
  },
})
// 监听 reactiveData
watch(
  () => reactiveData.friend.name,
  (newVal, oldVal) => {
    console.log('new ' + newVal)
    console.log('odl ' + oldVal)
  }
)
// 定义修改方法
const change = () => {
  // 修改 refData.value.name
  // refData.value.name += '='
  // 修改 refData.value.friend
  // refData.value.friend.name += '='
  // 修改 reactiveData.name
  // reactiveData.name += '='
  reactiveData.friend.name += '='
}
</script>
<style scoped></style>
